@import "mixins/all";

.button-hoverable {
  .content.hover-content {
    display: none;
  }
}

.button-hoverable:hover:not(.button-disable-hover) {
  .content.default-content {
    display: none;
  }
  .content.hover-content {
    display: table-cell;
  }
}

.follow-button {
  @include grey-button;
  width: 100%;

  &.unfollow:hover:not(.button-disable-hover) {
    background: $red;
    color: white;
  }

}

.disabled-button {
  &, &:hover {
    background-color: $border;
  }
}

.google-login-button {
  position: relative;
  cursor: pointer;
  color: white;
  display: block;
  text-align: left;
  text-shadow: 0px 0px 1px #aaaaaa;
  background: rgb(222,75,57);
  min-height: 48px;
  -moz-border-radius: 0.3125em;
  -webkit-border-radius: 0.3125em;
  border-radius: 0.3125em;
  padding: 4px 4px;
  width: 100%;
  margin-bottom: 0.75em;
  margin-top: 0.75em;
  &:hover {
    background: rgba(222,75,57, 0.5);
    color: #ffffff;
  }
  > img {
    max-width: 40px;
    float: left;
  }
  .google-text {
    margin-left: 14px;
    line-height: 40px;
  }
}

.linkedin-login-button {
  position: relative;
  cursor: pointer;
  color: white;
  display: block;
  text-align: left;
  text-shadow: 0px 0px 1px #aaaaaa;
  background: rgb(0,119,181);
  min-height: 48px;
  -moz-border-radius: 0.3125em;
  -webkit-border-radius: 0.3125em;
  border-radius: 0.3125em;
  padding: 3px 3px;
  width: 100%;
  margin-bottom: 0.75em;
  margin-top: 0.75em;
  &:hover {
    background: rgba(0,119,181, 0.5);
    color: #ffffff;
  }
  > img {
    max-width: 52px;
    float: left;
  }
  .linkedin-text {
    margin-left: 3px;
    line-height: 40px;
  }
}

.login-form,
.signup-form {
  a.fb-connect,
  a.google-login-button,
  a.linkedin-login-button {
    display: table;
    height: 46px;
    padding: 0 12px 0 5px;

    .fb-icon,
    .google-icon,
    .linkedin-icon {
      display: table-cell;
      vertical-align: middle;
      width: 40px;
    }

    .fb-icon {
      height: 25px;
      left: initial;
      padding: 4px 0 0;
      position: relative;
      text-align: center;
      top: initial;
    }

    .google-icon {
      height: 40px;
      padding: 6px 0 0;
    }

    .linkedin-icon {
      height: 22px;
      padding: 3px 0 0;
      text-align: center;
    }
    
    .fb-text,
    .google-text,
    .linkedin-text {
      display: table-cell;
      padding: 0 0 0 10px;
      vertical-align: middle;
    }
  }
}